<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:p="http://primefaces.org/ui">
    <h:head>
        <title>Login Page</title>
        <style type="text/css">
            body{
                /*background: #CCCCFF;*/
                color: red; 
            }
            #topContent{
                font-family:Lucida Sans Unicode;
                font-size: 300%;
                margin-top: 30px;
                margin-left: auto;
                margin-right: auto;
/*                border-color: green;
                border-width: 2px;
                border-style: solid;*/
            }
            
            #welcome{
                margin-top: 0;
                margin-bottom: 0;
                text-align: center;
/*                border-color: yellow;
                border-width: 2px;
                border-style: solid;*/
            }
            
            #loginform{
/*                border-color: orange;
                border-width: 2px;
                border-style: solid;*/
                margin-left: 15%;
                margin-right: 15%;
                margin-top: 10px;
                text-align: center;
            }
            
            #logo{
                position: absolute;
                margin-top: -26px;
            }
            .ui-layout, .ui-layout-doc, .ui-layout-unit, .ui-layout-wrap, .ui-layout-bd, .ui-layout-hd{
                border: none;
            }
        </style>
    </h:head>
    <h:body>
        <p:layout fullPage="true">
            <p:layoutUnit position="north" resizable="true" size="150">
                <div id="logo">
                    <p>
                        <h:link outcome="login">
                            <h:graphicImage  value="/images/meteocal2.png" width="30px" height="30px"/>
                            <h style="margin-top: -26px; margin-left:33px ;position: absolute">MeteoCal</h>
                        </h:link>
                    </p>
                </div>
                <div id="topContent">
                    <p id="welcome">
                        <h:graphicImage  value="/images/meteocal2.png" width="70px" height="70px"/>
                        Welcome to MeteoCal!
                    </p>
                </div>
            </p:layoutUnit>
            <p:layoutUnit position="west" resizable="false" size="45%" minSize="300">
                <h:form id="loginform" >
                    <p:panel header="Login Form" >
                        <p:panelGrid columns="2">
                            <p:outputLabel for="username" value="Email"/>
                            <p:inputText id="username" value="#{loginBean.username}" 
                                         required="true" />
                            <p:outputLabel for="pass" value="Password"/>
                            <p:password id="pass" value="#{loginBean.password}" 
                                        required="true" />
                            <p:commandButton id="submit" action="#{loginBean.login()}" value="Login" ajax="true" update="@all"/>
                        </p:panelGrid>
                        <h:messages  style="color: red; text-align: left"/>
                    </p:panel>
                    <br></br>
                    <p>Not registered yet? Sign up to MeteoCal!</p>    
                    <p:button outcome="register" value="Register"/>
                </h:form>
            </p:layoutUnit>
            <p:layoutUnit position="center" resizable="true" size="55%" >
                <h:graphicImage value="/images/provaImmagineMeteoCal.png" width="80%" height="80%"/>
            </p:layoutUnit>
            <!--            <p:layoutUnit position="south" resizable="true" size="30">
                            <h style="font-size: 8px; top:-15px;">
                                @Copyright MeteoCal Company
                            </h>
                        </p:layoutUnit>-->
            
        </p:layout>
    </h:body>
</html>

